import React,{useEffect,useState} from 'react'
import api from '../api'
import {Menu} from 'antd'
import * as icons from '@ant-design/icons'
import {useNavigate} from 'react-router-dom'
export default function SysMenus() {
  const [menuList,setMenuList]=useState([])
  useEffect(()=>{
    getAuthMenus()
  },[])
  const nav=useNavigate()
  const getAuthMenus=async()=>{
    const result=await api.users.getAuthMenus()
    const rlist=transformDataToMenus(result.data)
    console.log('转换后的结果',rlist);
    setMenuList(rlist)
  }
  /**
   * 将后台的权限菜单数据转成antd格式的菜单数据
   */
  const transformDataToMenus=(list)=>{
    return list.map(item=>{
        let menuItem={label:item.title,key:item.path,icon:React.createElement(icons[item.icon])}
        if(item.children){
            menuItem.children=transformDataToMenus(item.children)
        }
        return menuItem
    })
  }
  /*
    路由的跳转
  */
 const goNav=(item)=>{
    nav(item.key)
 }
  return (
    <>
        <Menu
            items={menuList}
            mode="inline"
            theme="dark"
            onClick={goNav}>
        </Menu>
    </>
  )
}
